<template>
  <div class="guide-wrap">
    <div class="guide-item">
      <span class="yuansuan">
        <span>1</span>
      </span>
      <div class="guide-item-text fuzhi">
        <span @click="copyLink">点击复制链接，在浏览器打开</span></div>
    </div>
    <div class="guide-item">
      <span class="yuansuan">
        <span>2</span>
      </span>
      <span class="guide-item-text">使用拼多多商家主账号登录授权</span>
    </div>
    <div class="guide-item">
      <span class="yuansuan">
        <span>3</span>
      </span>
      <span class="guide-item-text two-line">授权成功后，返回“易打单”小程序【待发货】页面，点击 【同步订单】获取拼多多订单</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {};
  },

  created() {},

  methods: {
    copyLink() {
      var url = wx.getStorageSync("guideUrl");
      wx.setClipboardData({
        data: url,
        success(res) {
          console.log(res);
        }
      });
    }
  }
};
</script>

<style scoped>
.guide-wrap {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
}
.fuzhi {
  display: inline-block;
}
.guide-item {
  width: 100%;
  margin-bottom: 0.38rem;
}
/* 引导，文字 */
.guide-item-text {
  display: inline-block;
  font-family: PingFang SC;
  width: 86%;
  margin-left: 0.3rem;
  font-size: 0.24rem;
  line-height: 0.32rem;
  color: #373e4f;
}
/* 3条两行，设置高度 */
.two-line {
  display: inline-block;
  height: 0.54rem;
}

.fuzhi span {
  display: inline-block;
  height: 0.5rem;
  padding: 0 0.25rem;
  font-weight: 500;
  line-height: 0.5rem;
  border: 1px solid #0077ff;
  border-radius: 25px;
  color: #0077ff;
}

span {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(55, 62, 79, 1);
}

/* 步骤圆圈 */
.yuansuan {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: inline-block;
  background: #ffffff;
  opacity: 1;
  vertical-align: top;
  border: 1px solid #0077ff;
  z-index: 2;
  margin-left: 0.3rem;
  margin-top: 0.03rem;
}
.yuansuan::after {
  content: "";
  display: block;
  z-index: -1;
  position: absolute;
  left: 0.5rem;
  top: 0.2rem;
  width: 1px;
  height: 1.8rem;
  background: #0077ff;
}
.yuansuan span {
  display: block;
  color: #0077ff;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
</style>
